﻿@model IEnumerable<Developer.Entity.Books>

@{
    ViewBag.Title = "NavigationBooks";
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="~/Content/UI/css/mui.min.css" rel="stylesheet" />
    <link href="~/Content/UI/css/mui.indexedlist.css" rel="stylesheet" />
    <link href="~/Content/UI/css/mdui.min.css" rel="stylesheet"/>
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        .mui-bar {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">列表</h1>
    </header>
    <div class="mui-content">
        <div id='list' class="mui-indexed-list">
            <div class="mui-indexed-list-search mui-input-row mui-search">
                <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索图书">
            </div>
            <div class="mui-indexed-list-bar">
                @foreach (var group in Model.OrderBy(a => a.JPY.Substring(0, 1)).GroupBy(a => a.JPY.Substring(0, 1)))
                {
                    <a>@group.Key</a>
                }

            </div>
            <div class="mui-indexed-list-alert"></div>
            <div class="mui-indexed-list-inner">
                <div class="mui-indexed-list-empty-alert">没有数据</div>
                <ul class="mui-table-view">
                    @{
                        foreach (var group in Model.OrderBy(a => a.JPY.Substring(0, 1)).GroupBy(a => a.JPY.Substring(0, 1)))
                        {
                            <li data-group="@group.Key" class="mui-table-view-divider mui-indexed-list-group">@group.Key</li>
                            foreach (var item in group)
                            {
                    <li data-value="@item.PY" data-tags="@item.JPY" class="mui-table-view-cell mui-indexed-list-item" id="@item.Id">@item.Name</li>

                            }
                        }
                    }
                    
                </ul>
            </div>
        </div>
    </div>
    <script src="~/Content/UI/js/mui.min.js"></script>
    <script src="~/Content/UI/js/mui.indexedlist.js"></script>
    <script src="~/Content/UI/js/mdui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
			mui.init();
			mui.ready(function() {
				var header = document.querySelector('header.mui-bar');
				var list = document.getElementById('list');
				//calc hieght
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				//create
				window.indexedList = new mui.IndexedList(list);
        });
            mui(".mui-table-view").on('tap', '.mui-table-view-cell', function () {
                //获取id
                var id = this.getAttribute("id");
                self.location = "/Book/detail/?bookId=" + id;
            }) 
    </script>
</body>

</html>